<template>
  <view class="container">
    <view class="top-bg"></view>
    <view class="house-info">
      <image v-if="isTsyfwinfo.fIszdgz == 1" class="key-house" :src="baseImgUrl + 'shiyoufangwu5.png'"
        @click="navigatorTo" :data-params="{ ...routerParams, ...isTsyfwinfo  }"
        :data-url="`/actual_real_estate/key_house_detail`">
      </image>
      <view class="house-title">
        <text class="house-name">{{ fJlxxqmc }}
          <text class="house-status" :class="isTsyfwinfo.fFwzt == 1 ? '' : 'house-status-active'"
            v-if="isTsyfwinfo.fFwzt">{{ isTsyfwinfo.fFwzt == 1 ? "已出租" : "未出租" }}</text></text>
        <text class="house-address">{{ roomName }}</text>
      </view>
      <image v-if="fZxbs === '1'" class="logout-png" :src="baseImgUrl + 'logout-icon.png'"></image>
      <u-line color="#DFDDDD" margin="23rpx 0 32rpx 0"></u-line>
      <view class="item-wrapper">
        <!-- <view class="i-left">
          <view class="i-label">房屋类别:</view>
          <view class="i-value">{{ isTsyfwinfo.fFwlbName }}</view>
        </view> -->
        <!-- <view class="i-right">
          <view class="i-label">房屋性质:</view>
          <view class="i-value">{{ isTsyfwinfo.fFwxzName }}</view>
        </view> -->
        <view class="i-left">
          <view class="i-label">房屋类型:</view>
          <view class="i-value">{{ isTsyfwinfo.fFwlxName }}</view>
        </view>
      </view>
      <view class="item-wrapper">

        <view class="i-right">
          <view class="i-label">房屋用途:</view>
          <view class="i-value">{{ isTsyfwinfo.fFwytName || "暂未添加" }}</view>
        </view>
      </view>
      <!-- <view class="item-wrapper">
        <view class="i-left">
          <view class="i-label">房屋间数:</view>
          <view class="i-value">{{
            isTsyfwinfo.fFwjs ? `${isTsyfwinfo.fFwjs}间` : "暂未添加"
          }}</view>
        </view>
        <view class="i-right">
          <view class="i-label">房屋面积:</view>
          <view class="i-value">{{
            isTsyfwinfo.fFwmj ? `${isTsyfwinfo.fFwmj.toFixed(2)}㎡` : "暂未添加"
          }}</view>
        </view>
      </view> -->

      <view class="item-wrapper">
        <!-- <view class="i-left">
          <view class="i-label">房屋产权号:</view>
          <view class="i-value">{{ isTsyfwinfo.fFwcqh || "暂未添加" }}</view>
        </view> -->
        <view class="i-right">
          <view class="i-label">房屋负责人:</view>
          <navigator
            :url="`/actual_real_estate/house_manager_list?fHouseid=${isTsyfwinfo.fHouseid}&source=actualRealHouse&buildingId=${isTsyfwinfo.fSsjzwDzbm}`">
            <view class="i-value house-owner">
              <!--1 是托管人-->
              查看
              >
            </view>
          </navigator>
        </view>
      </view>
      <u-line color="#DFDDDD" margin="0 0 23rpx 0"></u-line>
      <view class="item-wrapper">
        <view class="i-left">
          <view class="i-label">所属辖区:</view>
          <view class="i-value">{{ isTsyfwinfo.policeJurisdictionId }}</view>
        </view>
      </view>
      <view class="item-wrapper">
        <view class="i-right">
          <view class="i-label">采集人员:</view>
          <view class="i-value">{{
            `${isTsyfwinfo.fCjrxm}(${isTsyfwinfo.fCjrxmType})`
          }}</view>
        </view>
      </view>
      <view class="item-wrapper">
        <view class="i-left">
          <view class="i-label">采集时间:</view>
          <view class="i-value">{{
              isTsyfwinfo.fCjsj
                ? moment(isTsyfwinfo.fCjsj).format("yyyy-MM-DD HH:mm:ss")
                : ""
            }}
          </view>
        </view>
      </view>
    </view>

    <view class="person-info" v-if="housePopulationlist.length">
      <view class="person-title">现居人员</view>

      <view class="person-item-wrap">
        <view class="person-item" v-for="item in housePopulationlist">
          <image :src="item.fFaceUrl ? `${imgPrefix}${item.fFaceUrl}` : `${baseImgUrl}queryFace-01.png`"
            @click="pvwImage([item.fFaceUrl ? `${imgPrefix}${item.fFaceUrl}` : `${baseImgUrl}queryFace-01.png`])">
          </image>
          <view class="person-item-content">
            <view class="person-name">
              <view class="label">居民姓名:</view>
              <view class="value">{{ item.fXm }}</view>
              <view class="check-detail" @click="handleClickRouter"
                :data-url="`/actual_person/actual_person_detail?fId=${item.fId}&bName=${fJlxxqmc}&roomName=${roomName}`">
                查看详情 ></view>
            </view>
            <view class="person-name person-idcard">
              <view class="label">身份证号:</view>
              <view class="value">{{ encryptIDCard(item.fGmsfhm) }}</view>
            </view>
            <view class="person-name person-house-owner-relationship">
              <view class="label">与房主关系:</view>
              <view class="value">
                {{ item.fCjrxmType }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 此功能暂时不要 -->
    <!-- <view
        class="common-btn"
        v-if="isTsyfwinfo.fIszdgz != 1"
        :data-url="`/actual_real_estate/key_house_set`"
        @click="handleClickRouter"
      >
        <u-icon name="plus-circle"></u-icon>
        <view>设为重点关注</view>
      </view>
      <view
        v-else
        class="common-btn"
        :data-url="`/actual_real_estate/key_house_cancel`"
        @click="handleClickRouter"
      >
        <u-icon name="minus-circle"></u-icon>
        <view>解除重点关注</view>
      </view> -->
    <view class="button-wrapper" v-if="fZxbs !== '1'">
      <view v-if="isTsyfwinfo.fIszdgz == 1" class="btn-l" :data-url="`/actual_real_estate/key_house_cancel`"
        :data-params="{...routerParams, ...isTsyfwinfo }" @click="handleSetImportant">
        <u-icon name="minus-circle" class="btn-icon" width="33" height="33"></u-icon>
        <view class="btn-text">解除重点关注</view>
      </view>
      <view v-else class="btn-l" :data-url="`/actual_real_estate/key_house_detail`"
        :data-params="{ ...isTsyfwinfo, addressInfo }" @click="handleSetImportant">
        <u-icon name="plus-circle" class="btn-icon" width="33" height="33"></u-icon>
        <view class="btn-text">设为重点关注</view>
      </view>
      <view class="btn-l" :data-url="`/actual_real_estate/real_estate_add?type=edit&editOptions=${JSON.stringify(
          {
            ...isTsyfwinfo,
            addressDetail: roomName,
            fNames: fJlxxqmc,
          }
        )}`" @click="handleClickRouter">
        <u-icon name="edit-pen" class="btn-icon" width="33" height="33"></u-icon>
        <view class="btn-text">修改房屋信息</view>
      </view>
      <view class="btn-r" @click="handleAddActualPopulation">
        <u-icon name="man-add" class="btn-icon" width="33" height="33"></u-icon>
        <view class="btn-text">添加现居人员</view>
      </view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    getAction,
    postAction
  } from "@/utils/request.js";
  import {
    ajaxGetDictItems
  } from "@/api/api.js";
  import {
    getOptionsParams,
    handleClickRouter,
    navigatorTo,
    pvwImage,
    encryptIDCard
  } from "@/utils/util.js";
  import moment from "@/utils/moment.js";

  export default {
    data() {
      return {
        fDzbm: "",
        fJlxxqmc: "",
        roomName: "",
        baseImgUrl: this.$baseImgUrl,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        isTsyfwinfo: {},
        policeHouseMainsList: {},
        housePopulationlist: [],

        house_nature: [],
        house_category: [],
        house_type: [],
        is_important_house: [],
        house_use: [],
        homeowner_relationship: [],
        is_house_owner: [],
        options: {},
        dictMapping: {},
        addressInfo: {},
        routerParams: {},
        fZxbs: ''
      };
    },
    onLoad(options) {
      this.options = options;
      // 获取路由参数
      this.routerParams = getOptionsParams(options);
      console.log(this.routerParams);
      // 根据 buildType 设置
      // 建筑物
      if (this.routerParams.buildType == 1) {
        this.fDzbm = this.routerParams.jzFDzbm;
      } else {
        // 房间
        this.fDzbm = this.routerParams.fzFDzbm;
      }
      this.fJlxxqmc = this.routerParams.fJlxxqmc;
      this.roomName = this.routerParams.roomName;
      this.generateDict();
    },
    onShow() {
      this.getList();
    },
    methods: {
      encryptIDCard,
      moment,
      handleClickRouter,
      navigatorTo,
      pvwImage,
      async getList() {
        const {
          result: {
            fZxbs,
            housePopulationlist,
            isTsyfwinfo,
            policeHouseMainsList
          },
        } = await getAction(`/indeed/house/unitsDetailsInfo`, {
          fDzbm: this.fDzbm,
          buildType: this.routerParams.buildType + "",
        });
        this.fZxbs = fZxbs

        this.housePopulationlist = housePopulationlist;
        this.isTsyfwinfo = isTsyfwinfo;

        this.addressInfo.fSsjlxxqDzbm = isTsyfwinfo.fSsjlxxqDzbm;
        this.addressInfo.fSsjzwdyfwDzbm = isTsyfwinfo.fSsjzwdyfwDzbm;
        this.addressInfo.fSsjzwDzbm = isTsyfwinfo.fSsjzwDzbm;
        this.addressInfo.fSslcDzbm = isTsyfwinfo.fSslcDzbm;
        this.addressInfo.fSsjzwDzbm = isTsyfwinfo.fSsjzwDzbm;
        this.addressInfo.fSsdyDzbm = isTsyfwinfo.fSsdyDzbm;
        this.addressInfo.bName = this.fJlxxqmc;
        this.addressInfo.roomName = this.routerParams.roomName;
        this.addressInfo.buildType = this.routerParams.buildType;
        this.policeHouseMainsList = policeHouseMainsList;
      },
      generateDict() {
        let dict = uni.getStorageSync("allCode");
        Object.assign(this.dictMapping, dict);
      },
      get_dict_type(dictName, type) {
        let list = this.dictMapping[dictName];
        let res = list.find((item) => item.value == type);
        if (res && res.title) {
          return res.title;
        } else {
          return "暂无";
        }
      },
      handleAddActualPopulation() {
        uni.navigateTo({
          url: "/selfInfo/myHouse/addActualPopulation?type=add&addressInfo=" +
            encodeURIComponent(JSON.stringify(this.addressInfo)),
        });
      },
      handleSetImportant(e) {
        navigatorTo(e);
      },
    },
  };
</script>

<style scoped lang="scss">
  ::v-deep .u-icon>text {
    font-size: 32rpx !important;
    line-height: 32rpx !important;
    font-weight: blod !important;
  }

  .container {
    background: #f9f9f9;
    padding: 0 19rpx;
    padding-top: 220rpx;
    position: relative;
    display: flex;
    flex-direction: column;

    .top-bg {
      width: 100%;
      height: 460rpx;
      background: url($baseImgUrl + "shiyoufangwu4.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
      position: absolute;
      top: 0;
      left: 0;
    }

    .house-info {
      width: 712rpx;
      background: #ffffff;
      border-radius: 16rpx;
      display: flex;
      flex-direction: column;
      z-index: 1;
      padding: 40rpx 20rpx 0 20rpx;
      position: relative;

      .logout-png {
        width: 110rpx;
        height: 93rpx;
        position: absolute;
        top: 44rpx;
        right: 45rpx;
      }

      .key-house {
        width: 55rpx;
        height: 128rpx;
        position: absolute;
        top: 0;
        right: 26rpx;
        transform: translateY(-12rpx);
      }

      .house-title {
        flex: 1;
        display: flex;
        padding: 0 16rpx;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 30rpx;

        .house-name {
          font-weight: bold;
          font-size: 36rpx;
          color: #333333;
        }

        .house-address {
          font-weight: 500;
          font-size: 28rpx;
          color: #aaaaaa;
        }

        .house-status {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 22rpx;
          color: #0a66cc;
          padding: 3rpx 7rpx;
          background: #eef6fd;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          margin-left: 20rpx;
        }

        .house-status-active {
          color: #ffaf26;
          background: #fff6e6;
        }
      }

      .house-footer {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 16rpx;
        padding-top: 30rpx;
      }
    }

    .item-wrapper {
      display: flex;
      margin-bottom: 21rpx;

      .i-left,
      .i-right {
        flex: 1;
        display: flex;
      }

      .i-label {
        font-weight: 500;
        font-size: 28rpx;
        color: #aaaaaa;
        margin-right: 4rpx;
        flex-shrink: 0;
      }

      .i-value {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
      }

      .house-owner {
        color: #2488f5;
      }
    }

    .person-info {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      width: 712rpx;
      background: #ffffff;
      border-radius: 16rpx;
      margin: 10rpx 0;
      padding: 22rpx 12rpx;
      margin-bottom: 130rpx;

      .person-title {
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        padding-bottom: 16rpx;
        padding-left: 27rpx;
        border-bottom: 1rpx solid #e8e8e8;
      }

      .person-item-wrap {
        flex: 1;
        overflow: scroll;

        .person-item {
          width: 680rpx;
          height: 195rpx;
          background: #f9f9f9;
          border-radius: 16rpx 16rpx 16rpx 16rpx;
          border: 1rpx solid #eceaea;

          margin: 10rpx 0;
          padding: 22rpx 26rpx;

          &:nth-of-type(1) {
            margin-top: 24rpx;
          }

          display: flex;

          image {
            width: 163rpx;
            height: 152rpx;
          }

          .person-item-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .person-name {
              display: flex;
              align-items: center;
            }

            .label {
              width: 160rpx;
              text-align: right;
              font-weight: 500;
              font-size: 28rpx;
              color: #aaaaaa;
            }

            .value {
              font-weight: 500;
              font-size: 26rpx;
              color: #333333;
              margin-left: 16rpx;
            }

            .check-detail {
              flex: 1;
              font-weight: 400;
              font-size: 24rpx;
              color: #a5a5a5;
              text-align: right;
            }
          }
        }
      }
    }

    .common-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: 120rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 26rpx;
      color: #000000;
      padding-top: 26rpx;
      padding-bottom: 12rpx;
    }
  }

  .button-wrapper {
    height: 120rpx;
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;

    .btn-icon {
      width: 33rpx;
      height: 33rpx;
      margin-right: 10rpx;
    }

    .btn-text {
      line-height: 1;
      margin-left: 10rpx;
    }

    .btn-l,
    .btn-r {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 26rpx;
      color: #000000;
      height: 100%;
    }
  }
</style>